<%--
  Created by IntelliJ IDEA.
  User: guanz
  Date: 2023/3/7
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8"/>
    <title>注册</title>
    <meta name="author" content="DeathGhost" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css" />
    <style>
        body{height:100%;background:#16a085;overflow:hidden;}
        canvas{z-index:-1;position:absolute;}
    </style>
    <script src="js/jquery.js"></script>
    <script src="js/verificationNumbers.js"></script>
    <script src="js/Particleground.js"></script>
    <script>
        $(document).ready(function() {
            //粒子背景特效
            $('body').particleground({
                dotColor: '#5cbdaa',
                lineColor: '#5cbdaa'
            });
            //验证码
            createCode();
            //注册
            $(".enroll_btn") .click(function(){
                if (user() == true && passw() == true && phone()== true ) {
                    alert("返回登录页面");
                    location.href="login.html";
                }
            })
        });
    </script>
</head>
<body>

<dl class="admin_enroll">
    <dt>
        <strong>会员注册系统</strong>
        <em>Registration 	Management</em>
    </dt>
    <dd class="user_icon">
        <input type="text" placeholder="账号" class="login_txtbx" id="user"/>
    </dd>
    <dd class="pwd_icon">
        <input type="password" placeholder="密码" class="login_txtbx" id="password1"/>
    </dd>
    <dd class="pwd_icon">
        <input type="password" placeholder="确认密码" class="login_txtbx" id="password2"/>
    </dd>
    <dd class="pwd_icon">
        <input type="password" placeholder="真实姓名" class="login_txtbx"/>
    </dd>
    <dd class="user_icon">
        <input type="text" placeholder="电话" class="login_txtbx" id="phone"/>
    </dd>
    <dd class="user_select">
        <select name="" id="lid" class="login_selectbx" >
            <option value="" selected  label="--非会员--"></option>
            <option value="" selected  label="--白银会员--"></option>
            <option value="" selected  label="--黄金会员--"></option>
            <option value="" selected disabled="disabled" label="--请选择会员等级--"></option>
        </select>
    </dd>
    <dd class="user_icon">
        <select name="" id="rid" class="login_selectbx" >
            <option value="" selected  label="--管理员--"></option>
            <option value="" selected  label="--买家--"></option>
            <option value="" selected  label="--卖家--"></option>
            <option value="" selected disabled="disabled" label="--请选择权限--"></option>
        </select>
    </dd>
    <dd class="val_icon">
        <div class="checkcode">
            <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
            <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
        </div>
        <input type="button" value="验证码核验" class="ver_btn" onClick="validate();">
    </dd>
    <dd>
        <input type="button" value="立即注册" class="enroll_btn"/>
    </dd>
    <dd>
        <p>&copy; 2023-2024 qianfeng 版权所有</p>
        <p>辽B2-66666666-1</p>
    </dd>
</dl>

</body>

<script type="text/javascript">
    // 验证用户名
    function user(){
        var user = document.getElementById("user").value;
        // 正则
        var num = /^[A-Za-z0-9]+$/;
        if (user == "") {
            alert("账户不能为空");
            return false;
        }
        for (let i = 0; i < user.length; i++) {
            if (num.test(user[i]) != true) {
                alert("输入错误 只能输入数字和英文");
                return false;
            }
            if (i == user.length-1 && i>10) {
                alert("输入的长度过长");
                return false;
            }
        }
        return true;
    }
    // 验证密码
    function passw(){
        var password1 = document.getElementById("password1").value;
        var password2 = document.getElementById("password2").value;
        if (password1 == password2 && password1 != "") {
            return true;
        } else{
            alert("两个密码不一致")
        }
        return false;
    }
    // 验证手机号
    function phone(){
        var phone = document.getElementById("phone").value;
        var phonenum = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/;
        if (phonenum.test(phone)) {
            return true;
        } else{
            alert("电话号码有误");
        }
        return false;
    }
</script>

</html>
